<script setup lang="ts">
import { ref } from "@vue/reactivity";
import { onBeforeMount } from "@vue/runtime-core";
interface authorType {
  uid: number;
  name: string;
  desc: string;
  imgUrl: string;
  concern: boolean;
}
let isConcern = ref<boolean[]>([]);
let authorData = ref<authorType[]>([
  {
    uid: 1001,
    name: "老王子",
    desc: "小说家，诗人。@老王子抗击佳世客卡斯柯打卡",
    imgUrl:
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202108%2F22%2F20210822093116_21ae3.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650445647&t=6051584e9f898c3facb8143fdf3d0e76",
    concern: false,
  },
  {
    uid: 1002,
    name: "老王子",
    desc: "小说家，诗人。@老王子抗击佳世客卡斯柯打卡",
    imgUrl:
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202108%2F22%2F20210822093116_21ae3.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650445647&t=6051584e9f898c3facb8143fdf3d0e76",
    concern: false,
  },
  {
    uid: 1003,
    name: "老王子",
    desc: "小说家，诗人。@老王子",
    imgUrl:
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202108%2F22%2F20210822093116_21ae3.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650445647&t=6051584e9f898c3facb8143fdf3d0e76",
    concern: false,
  },
]);
// 获取g
let getAuthorDate = () => {
  let isConcern_list: boolean[] = [];
  authorData.value.forEach((n) => {
    isConcern_list.push(n.concern);
  });
  isConcern.value = isConcern_list;
};

let Concern = (uid: number, index: number) => {
  isConcern.value[index] = !isConcern.value[index];
  // 通过uid发起请求在关注表里面添加数据
};
let cancelConcern = (uid: number, index: number) => {
  isConcern.value[index] = !isConcern.value[index];
  // 通过uid发起请求在关注表里面添加数据
};
onBeforeMount(() => {
  getAuthorDate();
});
</script>

<template>
  <div class="findAuthorContainer">
    <div class="title">热门作者</div>
    <div class="author-item" v-for="(item, index) in authorData" :key="index">
      <div class="left-item">
        <img class="avatuar" :src="item.imgUrl" :alt="item.name + '.jpg'" />
        <div class="middle-item-desc">
          <div class="userName">{{ item.name }}</div>
          <div class="user-desc">{{ item.desc }}</div>
        </div>
      </div>
      <div
        v-if="isConcern[index]"
        class="right-item isconcern-active"
        @click="cancelConcern(item.uid, index)"
      >
        已关注
      </div>
      <div v-else class="right-item" @click="Concern(item.uid, index)">
        关注
      </div>
    </div>
  </div>
</template>

<style lang="less">
.findAuthorContainer {
  padding: 15px;
  .title {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .author-item {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .left-item {
      display: flex;
      width: 60vw;
      .avatuar {
        border-radius: 50%;
        width: 60px;
        height: 60px;
      }
      .middle-item-desc {
        padding-top: 10px;
        padding-left: 5px;
        width: 90%;
        .user-desc {
          color: #999;
          font-size: 13px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .right-item {
      width: 50px;
      height: 25px;
      font-size: 14px;
      margin-top: 18px;
      border: 2px solid #555;
      text-align: center;
      line-height: 25px;
      border-radius: 25px;
    }
    .isconcern-active {
      border: 1px solid #999;
    }
  }
}
</style>